<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="keywords" content="Media Source 提取示例">
  <meta name="description" content="Media Source 提取示例, Momo's Blog, LuckyMomo">
  <title>Media Source iframe 提取示例</title>
  <style>
  html, body, iframe {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    outline: none;
    overflow: hidden;
  }
  .m-p-action {
    position: fixed;
    top: 20px;
    width: 100%;
    font-size: 35px;
    text-align: center;
    font-weight: bold;
  }
  .m-p-other, .m-p-github, .m-p-copy, .m-p-player {
    position: fixed;
    right: 50px;
    background-color: #eff3f6;
    background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
    color: #24292e;
    border: 1px solid rgba(27, 31, 35, .2);
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    padding: 6px 12px;
    z-index: 99;
  }
  .m-p-help {
    position: fixed;
    right: 50px;
    top: 50px;
    width: 30px;
    height: 30px;
    color: #666666;
    z-index: 2;
    text-align: center;
    line-height: 30px;
    font-weight: bolder;
    border-radius: 50%;
    border: 1px solid rgba(27, 31, 35, .2);
    cursor: pointer;
    background-color: #eff3f6;
    background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
  }
  .m-p-github:hover, .m-p-other:hover, .m-p-help:hover, .m-p-copy:hover, .m-p-player:hover {
    opacity: 0.9;
  }
  .m-p-player {
    bottom: 30px;
  }
  .m-p-copy {
    bottom: 70px;
  }
  .m-p-other {
    bottom: 110px;
  }
  .m-p-github {
    bottom: 150px;
  }
  </style>
</head>
<body>
<iframe src="http://upyun.luckly-mjw.cn/Assets/media-source/example/iframe-inner.html"></iframe>
<section class="m-p-action g-box">Media Source iframe 提取示例</section>
<a class="m-p-help" target="_blank" href="https://segmentfault.com/a/1190000025182822">?</a>
<a class="m-p-github" target="_blank" href="https://github.com/Momo707577045/media-source-extract">github</a>
<a class="m-p-other" target="_blank" href="http://blog.luckly-mjw.cn/tool-show/index.html">其他实用工具</a>
<a class="m-p-player" target="_blank" href="http://blog.luckly-mjw.cn/tool-show/media-source-extract/player/player.html">专属播放器</a>
<div class="m-p-copy" id="copy">复制工具代码</div>
</body>
<script>
  function copyToClipboard (content) {
    let $input = document.createElement('textarea')
    $input.style.opacity = '0'
    $input.value = content
    document.body.appendChild($input)
    $input.select()

    document.execCommand('copy')
    document.body.removeChild($input)
    $input = null
  }

  copy.addEventListener('click', () => {
    fetch('http://blog.luckly-mjw.cn/tool-show/media-source-extract/extract-code.js', {
      mode: 'cors',
      cache: 'no-cache'
    })
    .then(res => res.text())
    .then(text => {
      console.log(text)
      copyToClipboard(text)
      alert('代码复制成功')
    })
  })
</script>
</html>